$(function() {
	$("#fig1").mouseover(function() {
		$("#myBox1").stop().animate({
			"width" : "288px"
		}, 500, function() {
			$(".menu_group1").show();
		});
	});

	$("#fig1").mouseleave(function() {
		$(".menu_group1").hide();
		$("#myBox1").stop().animate({
			"width" : "133px"
		}, 500);
	});

});

$(function() {
	$("#fig2").mouseover(function() {
		$("#myBox2").stop().animate({
			"width" : "288px"
		}, 500, function() {
			$(".menu_group2").show();
		});
	});

	$("#fig2").mouseleave(function() {
		$(".menu_group2").hide();
		$("#myBox2").stop().animate({
			"width" : "133px"
		}, 500);
	});

});	

$(function() {

	$("#fig3").mouseover(function() {
		$("#myBox3").stop().animate({
			width : "288px"
		}, 500, function() {
			$(".menu_group3").show();
		});
	});
	
	$("#fig3").mouseleave(function() {
		$(".menu_group3").hide();
		$("#myBox3").stop().animate({
			width : "133px"
		}, 500);
	});
});
		
$(function(){
	$("#fig4").mouseover(function() {
		$("#myBox4").stop().animate({
			width : "554px"
		}, 800, function() {
			$("#login").show();
		});
	});
	
	$("#fig4").mouseleave(function() {
		$("#login").hide();
		$("#myBox4").stop().animate({
			width : "117px"
		}, 800);
	});
});